<template>

    房型名称:<input type="text" v-model="RTname"/>
    <input type="button" value="查询" @click="Show"/>
    <table border="1">
        <thead>
            <tr>
                <td>房型名称</td>
                <td>图片</td>
                <td>面积</td>
                <td>是否有窗</td>
                <td>价格</td>
                <td>入住人数</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in Info">
                <td>{{item.Rtype_Name}}</td>
                <td><img style="width:60px;height:60px;" :src="item.Rtype_Img"/></td>
                <td>{{item.Rtype_Size}}</td>
                <td>{{item.Rtype_isHave==true?"有":"无"}}</td>
                <td>￥：{{item.Rtype_Price.toFixed(2)}}</td>
                <td>{{item.Rtype_Num}}</td>
                <td>{{item.Rtype_State==true?"启用":"停用"}}</td>
                <td>
                    <input type="button" value="修改" @click="UpdInfo(item.Rtype_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>

    <span>
        当前共有{{PageInfo.TotalCount}}条数据，每页显示{{PageInfo.PageSize}}条数据，当前第{{PageInfo.PageIndex}}/{{PageInfo.PageCount}}页
        <a href="#" @click="Page('F')" style="margin-left:20px;">首页</a>
        <a href="#" @click="Page('U')" style="margin-left:20px;">上一页</a>
        <a href="#" @click="Page('L')" style="margin-left:20px;">下一页</a>
        <a href="#" @click="Page('E')" style="margin-left:20px;">尾页</a>
    </span>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

//创建路由实例
const router=useRouter();

//创建生命周期钩子
onMounted(()=>{
    Show();
})

//创建响应式数据
const Info=ref([{
    Rtype_Id:0,
    Rtype_Name:"",
    Rtype_Size:0,
    Rtype_Price:0,
    Rtype_isHave:true,
    Rtype_Num:0,
    Rtype_State:true,
    Rtype_Img:""
}])

//分页参数
const PageInfo=ref({
    PageIndex:1,
    PageSize:2,
    TotalCount:0,
    PageCount:0
})

//查询参数
const RTname=ref("")

//显示数据
const Show=()=>{
    axios.get("https://localhost:7249/api/RoomType/ShowRoomType",{
        params:{
            RTname:RTname.value,
            PageIndex:PageInfo.value.PageIndex,
            PageSize:PageInfo.value.PageSize
        }
    })
    .then(res=>{
        Info.value=res.data.Data_Info;
        PageInfo.value.TotalCount=res.data.TotalCount;
        PageInfo.value.PageCount=res.data.PageCount;
    })
    .catch(err=>{
        console.log(err);
    })
}

//翻页
const Page=(choose:any)=>{
    switch(choose)
    {
        case"F":
           PageInfo.value.PageIndex=1;
        break;

        case"U":
           if(PageInfo.value.PageIndex>1)
           {
              PageInfo.value.PageIndex=PageInfo.value.PageIndex-1;
           }
           else{
              alert("当前已经是第一页");
           }
        break;

        case"L":
           if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
           {
              PageInfo.value.PageIndex=PageInfo.value.PageIndex+1;
           }
           else{
              alert("当前已经是最后一页");
           }
        break;

        case"E":
           PageInfo.value.PageIndex=PageInfo.value.PageCount;
        break;
    }
    Show();
}

//修改
const UpdInfo=(RTid:number)=>{
    router.push({
        name:"UpdRoomType",
        params:{
            id:RTid
        }
    })
}
</script>